<template>
  <div class="container">
    <div class="menu" style="width: 200px">
      <div class="logo">
        <img src="@/assets/menuLogo.png" alt="" width="130" />
      </div>
      <div class="menuList">
        <el-menu
          :default-active="firstDefaultActive"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @select="handleselect"
          @close="handleClose"
          collapse-transition
          text-color="#252930"
        >
          <div v-for="item in routes" :key="item.path + item.name">
            <el-menu-item :index="item.path">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </div>
    </div>
    <div class="content">
      <div class="header" style="display: flex; justify-content: space-between">
        <div>
          <h3>{{ userInfo.BankName + "后台管理系统" }}</h3>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: right;
            float: right;
            height: 60px;
          "
        >
          <!--          <el-button type="text" icon="el-icon-question" @click="handleselect('/help')" style="color: #000">帮助</el-button>-->
          <el-button
            type="text"
            icon="el-icon-s-home"
            @click="handleselect('/information')"
            style="color: #000; margin-right: 8px"
            >账户</el-button
          >
          <el-dropdown @command="handleCommand" style="float: right">
            <span class="el-dropdown-link">
              <el-image
                class="pointer"
                style="width: 40px; height: 40px; border-radius: 50%"
                :src="circleUrl"
                :fit="'cover'"
              >
                <div slot="error" class="image-slot">
                  <el-image
                    style="width: 40px; height: 40px; border-radius: 50%"
                    :src="require('@/assets/logo.png')"
                    :fit="'cover'"
                  >
                  </el-image>
                </div>
              </el-image>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="router">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import op from "../utils/OperatorCache";
import axios from "axios";
export default {
  data() {
    return {
      userInfo: {},
      firstDefaultActive: "/information",
      routes: [
        {
          path: "/MyMerchant",
          name: "我的商户",
          icon: "el-icon-user-solid",
        },
        {
          path: "/LoanRecords",
          name: "放款管理",
          icon: "el-icon-document",
        },
        {
          path: "/TransactionInquiry",
          name: "交易查询",
          icon: "el-icon-notebook-2",
        },
        {
          path: "/PastDueRecords",
          name: "逾期记录",
          icon: "el-icon-bank-card",
        },
        {
          path: "/PaymentHistory",
          name: "还款记录",
          icon: "el-icon-wallet",
        },
      ],
      circleUrl: "",
    };
  },
  mounted() {
    this.circleUrl = op.info.UserAvatarURL;
    // 获取缓存信息
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    console.log("获取缓存信息", this.userInfo);
  },
  methods: {
    handleselect(e) {
      this.firstDefaultActive = e;
      this.$router.push(e);
    },
    handleOpen(a) {
      console.log(a);
    },
    handleClose(a) {
      console.log(a);
    },
    handleCommand(command) {
      if (command == "loginOut") {
        const loading = this.$loading({
          lock: true,
          text: "退出中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        // this.$router.replace('/Login')
        sessionStorage.removeItem("token");
        op.clear();
        //  window.open("http://msq.yoojet.com/Login?tap=1", "_self");
        console.log("获取loacaiton", window.location.origin);
        window.open(window.location.origin + "/Login", "_self");
        setTimeout(() => {
          loading.close();
        }, 1000);
      }
    },
  },
  created() {
    this.firstDefaultActive = this.$route.path;
  },
  computed: {},
  watch: {},
};
</script>

<style lang="less" scoped>
.pointer {
  cursor: pointer;
}

.container {
  height: 100%;

  .menu {
    height: 100%;
    position: fixed;
    left: 0;
    box-shadow: 2px 0 2px #ddd;
    background: #fff;
    z-index: 100;

    .menuList {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      height: 60px;
      // justify-content: center;
      box-sizing: border-box;
      padding-left: 20px;
      align-items: center;

      .imgBox {
        height: 40px;
        width: 40px;
        border-radius: 40px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          height: 50px;
          width: 50px;
        }
      }
    }
  }

  .content {
    width: calc(100% - 200px);
    height: 100%;
    margin-left: 200px;

    .header {
      overflow: hidden;
      width: calc(100% - 200px);
      // display: flex;
      // justify-content: right;
      align-items: center;
      box-shadow: 0 2px 2px #ddd;
      background: #fff;
      height: 60px;
      box-sizing: border-box;
      padding: 0 20px;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 99;
    }

    .router {
      box-sizing: border-box;
      padding: 20px;
      padding-top: 80px;
      background: #f5f6fe;
      min-height: 100%;
    }
  }
}
</style>
